<template>
  <div class="student">
    <el-card>
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="题目ID：">
            <el-input v-model="name" clearable />
          </el-form-item>
            <el-form-item label="年级：" style="width: 300px" prop="userLevel">
            <el-select v-model="params.level" placeholder="年级">
              <el-option v-for="item in data1" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button type="success" @click="add">添加</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData1" style="width: 100%" border>
        <el-table-column prop="id" label="Id" width="180" />
        <el-table-column  label="学科" width="180" :formatter="formatsubject">
        <!-- <template #default="scope">
          <span > {{ scope.row.name }}({{ scope.row.levelName }})</span>
        </template> -->
        </el-table-column>


        <el-table-column prop="name" label="名称"  />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" width="350">
          <template #default="scope">
            <el-button>编辑</el-button>
            <el-button type="danger" @click="delete1(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
    <div style="margin-top: 20px;">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="400"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

    </el-card>
  </div>
</template>
<script setup lang="ts">
import UserAPI, { type examType, type educationType } from "@/api/system/user.api"
import { ref } from "vue"
import { ElMessage } from 'element-plus'
let name = ref("")
import { useRouter } from "vue-router"
const tableData = ref<educationType[]>([])
const tableData1 = ref<any>([])
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  params.value.pageSize = val
  getLIst()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  params.value.pageIndex = val
  getLIst()
}
let params=ref<examType>({
  id:null,
  level:null,
  subjectId:null,
  pageIndex:1,
  pageSize:10
})
interface arrType {
  value: number
  name: string
}
// 年级
let data1 = ref<arrType[]>([
  { value: 1, name: '一年级' },
  { value: 2, name: '二年级' },
  { value: 3, name: '三年级' },
  { value: 4, name: '四年级' },
  { value: 5, name: '五年级' },
  { value: 6, name: '六年级' },
  { value: 7, name: '初一' },
  { value: 8, name: '初二' },
  { value: 9, name: '初三' },
  { value: 10, name: '高一' },
  { value: 11, name: '高二' },
  { value: 12, name: '高三' },
])
const formatsubject = (row: any) => {
  console.log(row);
  
  // console.log(tableData.value);
  
  const foundItem = tableData.value.find(item => item.id === row.subjectId);
  return foundItem ? `${foundItem.name}(${foundItem.levelName})` : '';
}

// 获取列表
function getLIst() {
   UserAPI.geteducation().then(data => {
    tableData.value=data  
    console.log(data);
  })
    UserAPI.geteducationpage(params.value).then(data=>{
    console.log(data);

    tableData1.value=data.list

  })
}
onMounted(async () => {
  getLIst()
})


const router = useRouter()
function delete1(id: number) {
  ElMessageBox.confirm(
    '是否确认删除',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      UserAPI.delete(id).then(data => {
        console.log(data);
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        getLIst()
      })
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })


}
function add() {
  router.push("/exam/question/paperadd")
}
</script>
<style scoped lang="scss">
.student {
  padding: 16px;
}
</style>